<template>
  <el-container class="muzi">
    <el-header>
      <div class="left-panel"></div>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-input v-model="search.keyword" placeholder="搜索客户名称" class="nm-search-name" @blur="onSearch" clearable/>
          <el-button type="primary" icon="el-icon-search" @click="onSearch"/>
        </div>
      </div>
    </el-header>
    <el-main>
      <el-table :data="dataList" border style="width: 100%">
        <el-table-column prop="serial" label="客户编码"/>
        <el-table-column prop="name" label="客户名称"/>
        <el-table-column prop="type" label="客户分类"/>
        <el-table-column prop="tag" label="客户标签"/>
        <el-table-column prop="department" label="部门"/>
        <el-table-column prop="salesman" label="业务员"/>
        <el-table-column prop="address" label="地址"/>
        <el-table-column prop="contact" label="联系人"/>
        <el-table-column prop="mobile" label="手机"/>
        <el-table-column prop="tel" label="座机"/>
        <el-table-column prop="sex" label="性别"/>
        <el-table-column prop="remark" label="备注"/>
      </el-table>
      <el-row>
        <el-col :span="8">
          <el-button type="primary" @click="onCreate">新增客户</el-button>
        </el-col>
        <el-col :span="8">
          <div class="grid-content ep-bg-purple-light"/>
        </el-col>
        <el-col :span="8">
          <el-pagination layout="prev, pager, next" :total="total"/>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
  <DataForm v-if="show.form" ref="FormHandle" @success="onSearch" @closed="show.form=false"/>
</template>

<script>
/**
 * 页面施工中
 * @author Yufe
 * @version 1.0
 */
import DataForm from "@/views/clientele/form";

export default {
  name: 'Blank',
  components: {DataForm},
  data() {
    return {
      show: {
        form: false
      },
      total: 100,
      dataList: [],
    }
  },
  mounted() {
    this.onSearch();
  },
  computed: {},
  methods: {
    onSearch(num = 1) {
      this.$API.clientele.pager.get({num}).then(res => {
        if (res.success) {
          this.total = res.total;
          this.dataList = res.dataList;
        }
      })
    },
    onCreate() {
      this.show.form = true
      this.$nextTick(() => {
        this.$refs.FormHandle.open()
      })
    },
  }
}
</script>

<style lang="less" scoped>
.muzi {
  .el-main {
    padding: 0;
  }
}
</style>
